<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="test.css">
</head>
<body>

<div class="input-box" id="text">
  <span class="unit" id="spantext">姓名</span>
  <input type="text" class="form-control" id="name" required
         data-validation-required-message="Please enter your name." placeholder="请输入姓名">
</div>
<script>
    document.getElementById("spantext").style.display = "none";

    document.getElementById("name").onfocus = function () {
        myOnFocusFunction()
    };
    document.getElementById("name").onblur = function () {
        myOnBlurFunction()
    };

    function myOnFocusFunction() {
        document.getElementById("spantext").style.display = "";
        document.getElementById("name").style.height = "20px";
        document.getElementById("name").style.padding = "30px 20px 10px 20px";
    }

    function myOnBlurFunction() {
        document.getElementById("spantext").style.display = "none";
        document.getElementById("name").style.height = "40px";
        document.getElementById("name").style.padding = "10px 20px 10px 20px";
    }
</script>
</body>
</html>